<html>
  <head>
    <title>Pruchase Data Input</title>   
	<style type="text/css" title="currentStyle">
        @import "../../JavaScript/DataTables/media/css/demo_page.css";
        @import "../../JavaScript/DataTables/media/css/demo_table_jui.css";
        @import "../../JavaScript/DataTables/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css"; 
        @import "../../JavaScript/DataTables/extras/TableTools/media/css/TableTools.css";
        @import "../../JavaScript/DataTables/extras/ColReorder/media/css/ColReorder.css";
        @import "../../JavaScript/DataTables/extras/ColVis/media/css/ColVis.css";
        .ColVis {
				float: left;
				margin-bottom: 0
			}
			.dataTables_length {
				width: auto;
			}
		labeld.error{
			background:url("../../Image/unchecked.gif") no-repeat 0px 0px;
			padding-left:16px;
		}
		em.success{
			background:url("../../Image/checked.gif") no-repeat 0px 0px;
			padding-left:16px;
		}
  	</style>

  <script src="../../JavaScript/jquery-1.6.4.js"></script>
  <script src="../../JavaScript/Calendar/WdatePicker.js"></script>
  <script src="../../JavaScript/DataTables/media/js/jquery.dataTables.js"></script>
  <script src="../../JavaScript/DataTables/extras/TableTools/media/js/ZeroClipboard.js"></script>  
  <script src="../../JavaScript/DataTables/extras/TableTools/media/js/TableTools.js"></script>
  <script src="../../JavaScript/DataTables/extras/ColReorder/media/js/ColReorder.js"></script>
  <script src="../../JavaScript/DataTables/extras/ColVis/media/js/ColVis.js"></script>
  <script src="../../JavaScript/JqueryUI/development-bundle/external/jquery.bgiframe-2.1.2.js"></script> 
  <script src="../../JavaScript/JqueryUI/development-bundle/ui/jquery.ui.core.js"></script> 
  <script src="../../JavaScript/JqueryUI/development-bundle/ui/jquery.ui.widget.js"></script> 
  <script src="../../JavaScript/JqueryUI/development-bundle/ui/jquery.ui.mouse.js"></script> 
  <script src="../../JavaScript/JqueryUI/development-bundle/ui/jquery.ui.button.js"></script> 
  <script src="../../JavaScript/JqueryUI/development-bundle/ui/jquery.ui.draggable.js"></script> 
  <script src="../../JavaScript/JqueryUI/development-bundle/ui/jquery.ui.position.js"></script> 
  <script src="../../JavaScript/JqueryUI/development-bundle/ui/jquery.ui.resizable.js"></script> 
  <script src="../../JavaScript/JqueryUI/development-bundle/ui/jquery.ui.dialog.js"></script> 
  <script src="../../JavaScript/JqueryUI/development-bundle/ui/jquery.effects.core.js"></script> 
  <script src="../../JavaScript/jquery.validate.js"></script>
  <script src="../../JavaScript/jquery.metadata.js"></script>
  <script src="../../JavaScript/jquery.alphanumeric.js"></script>
  <script src="../../JavaScript/InputStock.js"></script>
  <script src="../../JavaScript/jquery.poshytip.js"></script>
  <link rel="stylesheet" href="../../JavaScript/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
  </head>
  
  <body>
     <div><br><span> Stock Purchase Data Input
  	</span>
  </div>
  <div>
    <br>
   	<hr>
    <br>
  </div>
  <div>
  <form id="form1">
  	<table id="table1">  		
  		<tr><td>Item Name:</td>
		<td><select id="item"><option /></select></td>
		<td><a href='#' id='addItem'>Add Item</a></td></tr>
		<tr><td>Date of Purchase:</td>
		<td><input id="date" type="text" class="Wdate" onFocus="WdatePicker({lang:'en'})"/>	</td></tr>
  		<tr><td>Place of Purchase:</td>
  		<td><input type="text" id="place"/></td></tr>
		<tr><td>Number of Items</td>
		<td><input type="text" id="number"/></td></tr>
		<tr><td>Total Purchase Price:</td>
		<td><input type="text" id="price"/></td></tr>
		<tr><td>Cost/Item:</td>
		<td id="cost"></td></tr>
	</table>	
	<button type="reset" id="reset">Reset</button>
  	<button type="button" id="submit">Submit</button>
  </form>
  </div>
  
  <div>
    <form id="form2" style="display:none">
		<table cellpadding="0" cellspacing="0" border="0" class="display" id="table2">
		<thead>
		<tr id="title">
			<th><input type="checkbox" id='selectAll'></input>&nbsp;<a href='#' id='deleteAll'>[Delete]</a></th>
			<th>Item Name/Description</th>
			<th>Date of New Purchase</th>
			<th>Place of Purchase</th>
			<th>Total Items Purchased</th>
			<th>Total Purchase Price</th>
			<th>Edit</th>
		</tr>
		</thead>
		<tbody>
		
		</tbody>
		</table>
		<button type="button" id='save'>Save&Record</button>
    </form>
   </div>
    
    <!--信息修改 -->
	<div id="dialog-form1" title="Edit Product Information"> 
	<p class="validateTips">All form are required.</p> 
	<form id="form3">
  		<table id="table3">
  		<tr><td>Item Name:</td>
		<td><select id="e_item"><option /></select></td></tr>
  		<tr><td>Date of Purchase:</td>
		<td><input id="e_date" type="text" class="Wdate" onFocus="WdatePicker({lang:'en'})"/>	</td></tr>
  		<tr><td>Place of Purchase:</td>
  		<td><input type="text" id="e_place"/></td></tr>	
  		<tr><td>Number of Items</td>
		<td><input type="text" id="e_number"/></td></tr>			
		<tr><td>Total Purchase Price:</td>
		<td><input type="text" id="e_price"/></td></tr>
		<tr><td>Cost/Item:</td>
		<td id="e_cost"></td></tr>
		</table>	
	</form>
	</div>
	
	<!--添加商品 -->
	<div id="dialog-form2" title="Add New Product Information"> 
		<p class="validateTips">The form with * are required.</p> 
  		<form id="form4">
  		<table id="table4">
  			<tr><td>Item Name:</td>
  			<td><input type="text" name="item" id="s_item"/><font color="red" id="d1">*</font></td></tr>
			<tr><td>Category:</td>
			<td><select name="category" id="s_category"></select><font color="red" id="d2">*</font></td></tr>
			<tr><td>Weight (g):</td>
			<td><input type="text" name="weight" id="s_weight"/></td></tr>
			<tr><td>Volume (ML):</td>
			<td><input type="text" name="volume" id="s_volume"/></td></tr>
			<tr><td>Height (cm):</td>
			<td><input type="text" name="height" id="s_height"/></td></tr>
			<tr><td>Width (cm):</td>
			<td><input type="text" name="width" id="s_width"/></td></tr>
			<tr><td>Depth (cm):</td>
			<td><input type="text" name="depth" id="s_depth"/></td></tr>
		</table>	
		</form>
  	</div>
  </body>
</html>
